<template>
	<view class="content">
		<!-- text 文本标签 p -->
		<!-- <text>用户登录</text> -->
		<!-- 1.手机系统状态栏设定 -->
		<!-- uni-nav-bar 标题栏 -->
		<!-- <uni-nav-bar backgroundColor="#090"></uni-nav-bar> -->
		<view class="uni-status-bar" :style="{height:statusBarHeight + 'px'}"></view>
		<!-- 2.logo -->
		<image src="../../static/img/logo.png" class="logo" mode="widthFix"></image>
		<!-- 3.手机号码输入框组 -->
		<!-- 提示：真正的app开发中，input就是没有初始边框颜色 -->
		<view class="input-group">
			<input v-model="phone" class="input" placeholder="请输入手机号">
			<uni-icons class="icon left" type="phone-filled" size="25px" color="#090"></uni-icons>
			<uni-icons class="icon right" type="clear" size="25px" color="#1296db"></uni-icons>
		</view>
		<!-- 4.密码输入框组 hidePwd:true 点击图标看见密码眼睛睁开  -->
		<view class="input-group pwd-group">
			<input v-model="pwd" :password="hidePwd" class="input" placeholder="请输入密码">
			<uni-icons class="icon left" type="locked-filled" size="25px" color="#090"></uni-icons>
			<!-- 眼睛斜杠实心的 -->
			<uni-icons class="icon right" :type="hidePwd?'eye-slash-filled':'eye-filled'" size="25px"
				@click="hidePwd=!hidePwd" color="#8a8a8a"></uni-icons>
		</view>
		<!-- 5.提交按钮 -->
		<button @click="doLogin" class="btn">登 录</button>
		<!-- 6.找回密码 -->
		<!-- ../feePay/feePay -->
		<!-- /pages/feePay/feePay -->
		<!-- <view> -->
		<!-- 导航跳转 -->
		<!-- <navigator open-type="navigate" class="find" url="/pages/feePay/feePay">找回密码1</navigator> -->
		<!-- 重定向跳转 -->
		<!-- <navigator open-type="redirect" class="find" url="/pages/feePay/feePay">找回密码2</navigator> -->
		<!-- 切换页签页 -->
		<!-- <navigator open-type="switchTab" class="find" url="/pages/my/my">找回密码3</navigator> -->
		<!-- 重新启动 reLaunch发射启动
		 重启应用程序，打开指定页面-->
		<!-- <navigator open-type="reLaunch" class="find" url="/pages/login/login">找回密码4</navigator> -->
		<!-- </view> -->
		<navigator class="find" url="/pages/feePay/feePay">找回密码</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, //系统状态栏的高度
				hidePwd: true, //是否隐藏密码
				phone: '13501234567', //用户输入的登录手机号
				pwd: '123456', //用户输入的密码
			}
		},
		methods: {
			async doLogin() {
				// console.log('当前输入', this.phone, this.pwd);
				//1.验证手机号是否合法，不合法就弹出提示框，退出执行
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					// 显示一个吐司对话框
					uni.showToast({
						title: '手机号非法', //提示标题
						icon: 'none', //图标
						duration: 5000 //持续时长
					})
					// 显示一个模态对话框
					// uni.showModal({})
					return
				}
				//2.验证密码是否合法，不合法就弹出提示框，退出执行
				if (!/^\d{6,}$/.test(this.pwd)) {
					// 显示一个吐司对话框
					uni.showToast({
						title: '密码不能小于六位数', //提示标题
						icon: 'none', //图标
						duration: 5000 //持续时长
					})
					// 显示一个模态对话框
					// uni.showModal({})
					return
				}
				//3.把手机号/密码提交给服务器端数据API,进行登录验证
				/************ 使用uni. request()发起GET请求 get请求没有主体 **********/
				let url = `https://www.codeboy.com/zhsqapi/user/list`
				let [err, res] = await uni.request({
					url
				})
				if (err) {
					uni.showModal({
						title: '错误',
						content: '异步请求失败！错误原因：' + err.errMsg
					})
				} else {
					console.log('请求成功！服务器返回响应消息主体：' + res.data);
				}
				//4.登录成功，提示“欢迎回来”，跳转到首页
				//5.登录失败，弹出错误提示框，显示错误原因
			}
		},
		onLoad() {
			let {
				statusBarHeight,
				screenHeight,

			} = uni.getSystemInfoSync()
			console.log('屏幕高度', screenHeight);
			this.statusBarHeight = statusBarHeight
			// console.log('系统状态栏信息', this.statusBarHeight);
		}

	}
</script>

<style lang="scss" scoped>
	// 手机顶部状态栏
	.uni-status-bar {
		background-color: $zh-theme-color;
		width: 750rpx; //宽度：占满一整行
		// 不同手机状态栏高度不同，查看当前手机状态栏高度
		// api得到系统信息，同步异步uni.pageScrollTo（）
		// height: 40rpx; //高度:临时
		position: fixed; //固定定位
	}

	.logo {
		width: 450rpx;
		// height: 500rpx;
		// block或inline=block使用左右margin：0 auto实现水平居中
		// margin: $uni-spacing-col-lg * 6 auto 0;
		// margin: $uni-spacing-col-lg*6 auto 0;
		margin: $uni-spacing-col-lg*6 auto 0;
		// margin: 0 auto 0;
	}

	@media screen and (max-height:500px) {
		.logo {
			margin-top: $uni-spacing-col-lg;
		}
	}

	@media screen and (min-height:700px) {
		.logo {
			margin-top: $uni-spacing-col-lg*12;
			margin-bottom: $uni-spacing-col-lg*4;
		}
	}

	.input-group {
		// 子绝父相
		position: relative;
		margin: $uni-spacing-col-lg*3 $uni-spacing-col-lg 0;
		// 弹性容器中的子s元素在交叉轴上居中对齐
		align-items: center;

		&.pwd-group {
			margin-top: $uni-spacing-col-lg*2;
		}

		.input {
			font-size: $uni-font-size-base;
			border: $zh-theme-color 1px solid;
			border-radius: $uni-border-radius-base;
			width: 100%;
			padding: 0 $uni-spacing-row-base*3;
			height: $uni-font-size-lg*2.2; //注意：此处不能使用line-height
		}

		.icon {
			position: absolute;

			&.left {
				left: $uni-spacing-col-sm;
			}

			&.right {
				right: $uni-spacing-col-sm;
			}
		}

	}

	.btn {
		margin: $uni-spacing-col-lg*2 $uni-spacing-row-lg 0;
		background: $zh-theme-color;
		color: $uni-text-color-inverse;
		font-size: $uni-font-size-base;

		//SCSS函数: darken(颜色， 百分比)， 返回一个更深的颜色值
		//SCSS函数: lighten(颜色， 百分比， 返回一个更浅的颜色值
		&:active {
			// background-color: lighten($zh-theme-color, 10%);
			background-color: darken($zh-theme-color, 10%);
		}
	}

	.find {
		text-align: center;
		color: $zh-theme-color;
		margin-top: $uni-spacing-col-lg*2;
	}
</style>
